import './PointMarker.scss'
const DEFAULT_IMAGE_STYLE = {
  src: './images/title.png',
  width: 220,
  height: 76,
  opacity: 1,
  offsetLeft: 40,
  offsetTop: 76
}
const DEFAULT_TEXT_STYLE = {
  left: 30, // 'auto' 表示水平居中
  top: 10, // 'auto' 表示垂直居中
  color: '#fff',
  fontSize: 14
}
/**
 * opt
 * imageStyle : 图片样式
 * position : [longitude,latitude]
 * text : 文字
 * textStyle : 文字样式
 * extData
 */
export default class PointMarker {
  constructor(map, opt) {
    this._initialize(map, opt || {})
  }
  _initialize(map, opt) {
    this._map = map
    this._show = false
    this._imageStyle = opt.imageStyle || DEFAULT_IMAGE_STYLE
    this._textStyle = opt.textStyle || DEFAULT_TEXT_STYLE
    this._text = opt.text
    this._position = opt.position || [120, 30]
    this._extData = opt.extData
    this._click = opt.click

    let obj = this._createMarker()
    this._marker = obj.marker
    this._dom = obj.body
  }

  show() {
    if (!this._show) {
      this._show = true
      this._marker.setMap(this._map)
    }
  }

  hide() {
    if (this._show) {
      this._show = false
      this._marker.setMap(null)
    }
  }

  destory() {
    this.hide()
  }

  _clickHandle() {
    // console.log(this)
    typeof this._click === 'function' && this._click(this._extData)
  }

  _createMarker() {
    let offsetWidth = -p(this._imageStyle.offsetLeft, this._imageStyle.width / 2)
    let offsetHeight = -p(this._imageStyle.offsetTop, -this._imageStyle.height / 2)
    let body = this._createElement()

    // body.div.addEventListener('click', () => {
    //   typeof this._click === 'function' && this._click(this._extData)
    // })

    let marker = new AMap.Marker({
      position: this._position,
      offset: new AMap.Pixel(offsetWidth, offsetHeight),
      content: body.div
    })

    marker.on('click', this._clickHandle, this)

    return {
      marker,
      body
    }
  }

  _createElement() {
    let width = this._imageStyle.width
    let height = this._imageStyle.height

    let div = document.createElement('div')
    div.className = 'custom-marker-point'
    div.style.width = width + 'px'
    div.style.height = height + 'px'

    let img = document.createElement('div')
    img.className = 'map-point-img-dom'
    // img.src = this._imageStyle.src
    img.style.backgroundImage = `url(${this._imageStyle.src})`
    if (this._textStyle.left == 'auto') {
      img.style.justifyContent = 'center'
    }
    if (this._textStyle == 'auto') {
      img.style.alignItems = 'center'
    }

    let text = document.createElement('div')
    text.className = 'map-point-text-dom'
    text.style.color = this._textStyle.color || '#fff'
    text.style.fontSize = (this._textStyle.fontSize || 14) + 'px'

    if (this._textStyle.left == 'auto' || this._textStyle.top == 'auto') {
      if (this._textStyle.left != 'auto') {
        text.style.marginLeft = this._textStyle.left + 'px'
      }
      if (this._textStyle.top != 'auto') {
        text.style.marginTop = this._textStyle.top + 'px'
      }
    } else {
      text.style.position = 'absolute'
      text.style.left = this._textStyle.left + 'px'
      text.style.top = this._textStyle.top + 'px'
    }

    text.innerText = this._text

    img.appendChild(text)

    div.appendChild(img)

    return {
      div,
      img,
      text
    }

  }
}

function p(value, defaultValue) {
  return value === undefined ? defaultValue : value
}